<script setup lang="ts">
import { reactive } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'

interface FeatureItem {
  label: string
  text: string
  isChecked: boolean
}

const list = reactive<FeatureItem[]>([
  {
    label: '问答功能',
    text: '用户主动提问，机器人根据知识库中的语料给出相应的答案',
    isChecked: true,
  },
  {
    label: '自定义任务',
    text: '自定义多轮对话任务',
    isChecked: false,
  },
  {
    label: '通用寒暄',
    text: '用户发出寒暄类消息，机器人根据通用寒暄库中的语料给出相应的答案',
    isChecked: true,
  },
  {
    label: '自定义标签',
    text: '用于设置聊天窗口右侧区域的标签功能，可最多设置三个标签',
    isChecked: true,
  },
])
</script>

<template>
  <div class="step-page2">
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="left">
        <div>
          <el-icon size="2rem" color="#0099FF"><InfoFilled /></el-icon>
        </div>
        <div>
          <p>{{ item.label }}</p>
        </div>
      </div>
      <div class="right">
        <div>
          <el-switch v-model="item.isChecked" />
        </div>
        <div>
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.step-page2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 800px;
  margin: 0 auto;
}

.item {
  display: flex;
  gap: 20px;
  padding: 10px;
}

.item .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
  border: 1px solid #4fb5f9;
  background-color: #e8f4ff;
  border-radius: 10px;
}
</style>
